<template>
	<view class="h_100 bg-white">
		<view class="content container text-center">
			<view class="admin_img m-auto"><image class="m-auto" src="@/static/img2/home/admin_img.png" mode="aspectFit"></image></view>
			<view class="mt-3 c_9 font_24_2">
				您设置的管理员将有权限对企业主页
				<br />
				中的信息进行编辑
			</view>
			<view class="mt-3 c_9 font_24_2">
				在下放搜索您要添加的手机号
				<br />
				最多添加5人
			</view>
			<view class="search_warp w-100 container">
				<view class=" mt-3"><search-view placeholder="请输入手机号" actionText="查找" @search="searchChange" @clear="searchChange('')"></search-view></view>
				<view class="result shadow rounded" v-show="userShow">
					<view class="top_text font-small text-center py c_9">为您找到一下结果</view>
					<view class="cont bg-white">
						<view class="" v-if="!searchUser"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="未查询到拥有此号码的用户"></u-empty></view>
						<view class="flex justify-between align-center p-2" v-else>
							<view class="user flex align-center">
								<u-avatar :src="searchUser.userphoto" size="40"></u-avatar>
								<view class="text-left ml-1">
									<view class="font-weight-bold font">{{ searchUser.nickname }}</view>
									<view class="font-small bg_main text-white px-2 rounded_15 mt-1">{{ searchUser.company_name }}</view>
								</view>
							</view>
							<view class="add_btn pl-1"><button class="font-sm bg_main text-white mx-3" @click="userChange(searchUser.id, 1)">添加</button></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 管理员列表 -->
			<view class="flex justify-between mt-5">
				<view class="user_item flex flex-column align-center" v-for="item of userList" :key="item.id">
					<image v-if="item.id" class="delete" src="@/static/img2/home/user_delete.png" mode="aspectFit" @click="deleteChange(item.id, 2)"></image>
					<u-avatar :src="item.userphoto" size="50"></u-avatar>
					<view class="w-100 font-weight-bold font-sm mt-1 text-ellipsis">{{ item.nickname }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import searchView from '@/components/search/search.vue';
import { authorityUser, setupIstrator, istratorList } from '@/api/my/person_set.js';
export default {
	components: { searchView },
	data() {
		return {
			searchUser: null,
			userShow: false,
			userList: [],
			userNum: 0
		};
	},
	onLoad() {
		this.info();
	},
	methods: {
		info() {
			istratorList({ token: uni.getStorageSync('userInfo').token }).then(res => {
				// console.log('管理员列表', res);
				if (res.code == 0) {
					this.userNum = res.data.length;
					let num = 5 - res.data.length;
					let list = [];
					for (var i = 0; i < num; i++) {
						list.push(new Object());
					}
					this.userList = [...res.data, ...list];
				} else {
					uni.$u.toast(res.msg);
				}
			});
		},
		searchChange(val) {
			if (val) {
				authorityUser({ phone: val }).then(res => {
					if (res.code == 0) {
						this.searchUser = res.data;
						this.userShow = true;
					} else {
						console.log('查找失败', res.msg);
						uni.$u.toast(res.msg);
					}
				});
			} else {
				this.userShow = false;
			}
		},
		userChange(id, type) {
			if (this.userNum >= 5) {
				uni.showModal({
					title: '通知',
					content: '管理员数量已到上限请编辑后重新添加',
					success: res => {
						if (res.confirm) {
							return;
						} else {
							return;
						}
					}
				});
				return;
			}
			let msg = {
				token: uni.getStorageSync('userInfo').token,
				id: id,
				type: type //1  添加管理员   2  删除管理员
			};
			setupIstrator(msg).then(res => {
				this.info();
				uni.$u.toast(res.msg);
				this.userShow = false;
				this.searchChange('');
			});
		},
		deleteChange(id, type) {
			uni.showModal({
				title: '通知',
				content: '确认删除吗',
				success: res => {
					if (res.confirm) {
						this.userChange(id, type);
					} else {
						return;
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding-top: 100rpx;
}
.admin_img {
	width: 140rpx;
	height: 140rpx;
	border: 3px solid #cf1526;
	border-radius: 50%;

	image {
		width: 120rpx;
		height: 120rpx;
	}
}
.search_warp {
	position: relative;
	.result {
		width: 90%;
		position: absolute;
		top: 62rpx;
		left: 50%;
		margin-left: -45%;
		z-index: 99;
		.top_text {
			background-color: #d7d7d7;
		}
		.cont {
			.user {
				width: 80%;
				border-right: 1px solid #cecece;
			}
			.add_btn {
				button {
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
				}
			}
		}
	}
}
.user_item {
	width: calc(100% / 5);
	position: relative;
	.delete {
		position: absolute;
		top: -10rpx;
		right: 10rpx;
		width: 50rpx;
		height: 50rpx;
		z-index: 9;
	}
}
</style>
